<template>
  <div class="user-container px-7">
    <!-- head -->
    <div class="head-container">
      <div v-if="isGetUserInfo" class="user-head-block d-flex ai-center jc-between  pb-7">
        <div class="base-info d-flex ai-center">
          <img :src="userInfo.avatarUrl" class="user-avatar mr-6">
          <div class="info-block">
            <p>{{userInfo.nickName}}</p>
            <div class="d-flex ai-center">
              <img src="/static/images/page/site.png" class="site-i mr-3">
              <span>{{userInfo.city}}</span>
            </div>
          </div>
        </div>
        <div class="transform-usertype">
          <picker @change="userTypeChange" :value="userTypeIndex" :range="userType">
            <img src="/static/images/page/transform-usertype.png" class="transform-i mb-3">
            <p class="fs-sm">{{userType[userTypeIndex]}}</p>
          </picker>
        </div>
      </div>
      <div v-else class="login-block flex-c">
        <button class="login-btn flex-c fs-xl text-green fwb" open-type="getUserInfo"
                @getuserinfo="bindGetUserInfo">登录</button>
      </div>
    </div>
    <!-- collect -->
    <div class="collect-block">
      <div class="title-block d-flex  mb-7">
        <span class="fs-xl fwb pr-4">我的收藏</span>
        <p class="title-dress-line flex-1"></p>
      </div>
      <div class="collect-content">
        <flow-data v-if="collect.length" />
        <p v-else class="fs-xl text-info text-center" style="padding-top:385rpx">暂无收藏的内容</p>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import FlowData from '@/components/FlowData'
export default {
  components: { FlowData },
  data() {
    return {
      userType: ["轮椅用户", "拐杖用户", "假肢用户", "普通用户"],
      userTypeIndex: 0,
      collect: []
    }
  },
  computed: {
    ...mapGetters(['openid', 'userInfo', 'isGetUserInfo', 'location', 'gpsLocation']),
  },
  methods: {
    bindGetUserInfo(e) {
      const userInfo = e.mp.detail.userInfo
      if (!userInfo) return
      this.$store.commit('user/SET_USER_INFO', userInfo)
      // 测试

    },
    userTypeChange(e) {
      this.userTypeIndex = e.mp.detail.value
    }
  },
}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
@import "@/styles/index.scss";
.user-container {
  .user-head-block {
    padding-top: 35rpx;
    .base-info {
      .user-avatar {
        @include wh(100rpx, 100rpx);
        border-radius: 50%;
      }
      .site-i {
        @include wh(20rpx, 28rpx);
      }
    }
    .transform-usertype {
      .transform-i {
        @include wh(60rpx, 60rpx);
        margin: 0 auto;
        border-radius: 50%;
      }
    }
  }
  .login-block {
    height: 165rpx;
    .login-btn {
      @include wh(290rpx, 80rpx);
      border-radius: 40rpx;
      border: 5rpx solid #68bf79;
    }
  }

  .collect-block {
    .title-dress-line {
      border-bottom: 1rpx solid $green-border;
    }
  }
}
</style>